<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用数据管理</title>
    <link rel="stylesheet" href="/libs/element-plus.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: Arial, sans-serif;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-item {
            margin-bottom: 15px;
        }
        
        .form-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-item input, .form-item select, .form-item textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .form-item textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .btn-primary {
            background-color: #409eff;
            color: white;
        }
        
        .btn-default {
            background-color: #ecf5ff;
            color: #409eff;
        }
        
        .btn-danger {
            background-color: #f56c6c;
            color: white;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th, .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .table th {
            background-color: #f5f7fa;
            font-weight: bold;
        }
        
        .actions {
            white-space: nowrap;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #409eff;
            cursor: pointer;
            margin-right: 5px;
        }
        
        .loading {
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #409eff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .field-item {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .field-item input {
            flex: 1;
        }
        
        .field-item select {
            width: 120px;
        }
        
        .field-actions {
            width: 60px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #dcdfe6;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .tab.active {
            border-bottom: 2px solid #409eff;
            color: #409eff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>通用数据管理</h2>
        </div>
        
        <div class="tabs">
            <div class="tab active" data-tab="templates">数据模板</div>
            <div class="tab" data-tab="records">数据记录</div>
        </div>
        
        <!-- 数据模板管理 -->
        <div id="templates" class="tab-content active">
            <div class="card">
                <div class="header">
                    <h3>数据模板列表</h3>
                    <button class="btn btn-primary" onclick="showCreateTemplateForm()">添加模板</button>
                </div>
                
                <div id="templateLoading" class="loading" style="display: none;">
                    <div class="spinner"></div>
                    <p>加载中...</p>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>模板名称</th>
                            <th>字段数量</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="templateList">
                        <!-- 模板列表将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 数据记录管理 -->
        <div id="records" class="tab-content">
            <div class="card">
                <div class="header">
                    <h3>数据记录列表</h3>
                    <div>
                        <select id="recordTemplateFilter" onchange="filterRecordsByTemplate()">
                            <option value="">选择模板</option>
                        </select>
                        <button class="btn btn-primary" onclick="showCreateRecordForm()">添加记录</button>
                    </div>
                </div>
                
                <div id="recordLoading" class="loading" style="display: none;">
                    <div class="spinner"></div>
                    <p>加载中...</p>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>模板</th>
                            <th>数据预览</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="recordList">
                        <!-- 记录列表将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 模板表单弹窗 -->
    <div id="templateModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; overflow-y: auto;">
        <div style="background: white; width: 800px; margin: 50px auto; border-radius: 4px; padding: 20px;">
            <h3 id="templateModalTitle">添加模板</h3>
            <form id="templateForm">
                <input type="hidden" id="templateId">
                <div class="form-item">
                    <label for="templateName">模板名称</label>
                    <input type="text" id="templateName" required>
                </div>
                <div class="form-item">
                    <label>字段定义</label>
                    <div id="fieldList">
                        <!-- 字段列表将通过JavaScript动态添加 -->
                    </div>
                    <button type="button" class="btn btn-default" onclick="addField()">添加字段</button>
                </div>
                <div class="form-item">
                    <label for="templateStatus">状态</label>
                    <select id="templateStatus">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div style="text-align: right;">
                    <button type="button" class="btn btn-default" onclick="hideTemplateModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 记录表单弹窗 -->
    <div id="recordModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; overflow-y: auto;">
        <div style="background: white; width: 800px; margin: 50px auto; border-radius: 4px; padding: 20px;">
            <h3 id="recordModalTitle">添加记录</h3>
            <form id="recordForm">
                <input type="hidden" id="recordId">
                <div class="form-item">
                    <label for="recordTemplate">选择模板</label>
                    <select id="recordTemplate" onchange="loadTemplateFields()" required>
                        <option value="">请选择模板</option>
                    </select>
                </div>
                <div id="recordFields">
                    <!-- 记录字段将通过JavaScript动态添加 -->
                </div>
                <div style="text-align: right;">
                    <button type="button" class="btn btn-default" onclick="hideRecordModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="/libs/vue.global.prod.js"></script>
    <script src="/libs/element-plus.js"></script>
    
    <script>
        // 当前数据
        let templates = [];
        let records = [];
        let editingTemplate = null;
        let editingRecord = null;
        
        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', async function() {
            showTemplateLoading(true);
            await Promise.all([
                loadTemplates(),
                loadRecords()
            ]);
            showTemplateLoading(false);
            renderTemplateList();
            renderRecordList();
            updateTemplateOptions();
            updateRecordTemplateFilter();
            
            // 绑定标签页切换事件
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    switchTab(tabName);
                });
            });
        });
        
        // 切换标签页
        function switchTab(tabName) {
            // 更新标签页激活状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`.tab[data-tab="${tabName}"]`).classList.add('active');
            
            // 显示对应内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(tabName).classList.add('active');
        }
        
        // 显示/隐藏模板加载指示器
        function showTemplateLoading(show) {
            const loadingIndicator = document.getElementById('templateLoading');
            const templateList = document.getElementById('templateList');
            
            if (show) {
                loadingIndicator.style.display = 'block';
                templateList.style.display = 'none';
            } else {
                loadingIndicator.style.display = 'none';
                templateList.style.display = 'table-row-group';
            }
        }
        
        // 显示/隐藏记录加载指示器
        function showRecordLoading(show) {
            const loadingIndicator = document.getElementById('recordLoading');
            const recordList = document.getElementById('recordList');
            
            if (show) {
                loadingIndicator.style.display = 'block';
                recordList.style.display = 'none';
            } else {
                loadingIndicator.style.display = 'none';
                recordList.style.display = 'table-row-group';
            }
        }
        
        // 加载模板数据
        async function loadTemplates() {
            try {
                const response = await fetch('/data/templates', {
                    credentials: 'include'
                });
                
                if (response.ok) {
                    const result = await response.json();
                    templates = result.data || [];
                } else {
                    console.error('获取模板数据失败:', response.status);
                    templates = []; // 确保templates是一个数组
                }
            } catch (error) {
                console.error('获取模板数据异常:', error);
                templates = []; // 确保templates是一个数组
            }
        }
        
        // 加载记录数据
        async function loadRecords() {
            try {
                const response = await fetch('/data/records', {
                    credentials: 'include'
                });
                
                if (response.ok) {
                    const result = await response.json();
                    records = result.data || [];
                } else {
                    console.error('获取记录数据失败:', response.status);
                    records = []; // 确保records是一个数组
                }
            } catch (error) {
                console.error('获取记录数据异常:', error);
                records = []; // 确保records是一个数组
            }
        }
        
        // 渲染模板列表
        function renderTemplateList() {
            const container = document.getElementById('templateList');
            container.innerHTML = '';
            
            if (templates.length > 0) {
                templates.forEach(template => {
                    const row = document.createElement('tr');
                    
                    // 获取字段数量
                    const fieldCount = (template.fields && Array.isArray(template.fields)) ? template.fields.length : 0;
                    
                    // 获取状态文本
                    const statusText = template.status == 1 ? '启用' : '禁用';
                    
                    // 格式化日期
                    const createTime = new Date(template.createdAt).toLocaleString();
                    
                    row.innerHTML = `
                        <td>${template.id}</td>
                        <td>${template.name}</td>
                        <td>${fieldCount}</td>
                        <td>${statusText}</td>
                        <td>${createTime}</td>
                        <td class="actions">
                            <button class="action-btn" onclick="showEditTemplateForm(${template.id})">编辑</button>
                            <button class="action-btn" onclick="deleteTemplate(${template.id})">删除</button>
                            <button class="action-btn" onclick="showCreateRecordForm(${template.id})">添加记录</button>
                        </td>
                    `;
                    
                    container.appendChild(row);
                });
            } else {
                const row = document.createElement('tr');
                row.innerHTML = '<td colspan="6" style="text-align: center;">暂无模板数据</td>';
                container.appendChild(row);
            }
        }
        
        // 渲染记录列表
        function renderRecordList() {
            const container = document.getElementById('recordList');
            container.innerHTML = '';
            
            if (records.length > 0) {
                records.forEach(record => {
                    const row = document.createElement('tr');
                    
                    // 获取模板名称
                    const template = templates.find(t => t.id === record.templateId);
                    const templateName = template ? template.name : '未知模板';
                    
                    // 数据预览
                    let dataPreview = '-';
                    if (record.data) {
                        const dataEntries = Object.entries(record.data);
                        if (dataEntries.length > 0) {
                            const firstEntry = dataEntries[0];
                            dataPreview = `${firstEntry[0]}: ${firstEntry[1]}`;
                        }
                    }
                    
                    // 格式化日期
                    const createTime = new Date(record.createdAt).toLocaleString();
                    
                    row.innerHTML = `
                        <td>${record.id}</td>
                        <td>${templateName}</td>
                        <td>${dataPreview}</td>
                        <td>${createTime}</td>
                        <td class="actions">
                            <button class="action-btn" onclick="showEditRecordForm(${record.id})">编辑</button>
                            <button class="action-btn" onclick="deleteRecord(${record.id})">删除</button>
                        </td>
                    `;
                    
                    container.appendChild(row);
                });
            } else {
                const row = document.createElement('tr');
                row.innerHTML = '<td colspan="5" style="text-align: center;">暂无记录数据</td>';
                container.appendChild(row);
            }
        }
        
        // 更新模板选项
        function updateTemplateOptions() {
            const templateSelect = document.getElementById('recordTemplate');
            
            // 保留第一个选项
            const firstOption = templateSelect.firstElementChild;
            templateSelect.innerHTML = '';
            templateSelect.appendChild(firstOption);
            
            templates.forEach(template => {
                const option = document.createElement('option');
                option.value = template.id;
                option.textContent = template.name;
                templateSelect.appendChild(option);
            });
        }
        
        // 更新记录筛选选项
        function updateRecordTemplateFilter() {
            const templateSelect = document.getElementById('recordTemplateFilter');
            
            // 保留第一个选项
            const firstOption = templateSelect.firstElementChild;
            templateSelect.innerHTML = '';
            templateSelect.appendChild(firstOption);
            
            templates.forEach(template => {
                const option = document.createElement('option');
                option.value = template.id;
                option.textContent = template.name;
                templateSelect.appendChild(option);
            });
        }
        
        // 根据模板筛选记录
        async function filterRecordsByTemplate() {
            const templateId = document.getElementById('recordTemplateFilter').value;
            
            showRecordLoading(true);
            if (templateId) {
                try {
                    const response = await fetch(`/data/records/template/${templateId}`, {
                        credentials: 'include'
                    });
                    
                    if (response.ok) {
                        const result = await response.json();
                        records = result.data || [];
                    } else {
                        console.error('获取记录数据失败:', response.status);
                        records = []; // 确保records是一个数组
                    }
                } catch (error) {
                    console.error('获取记录数据异常:', error);
                    records = []; // 确保records是一个数组
                }
            } else {
                await loadRecords();
            }
            showRecordLoading(false);
            renderRecordList();
        }
        
        // 显示创建模板表单
        function showCreateTemplateForm() {
            editingTemplate = null;
            document.getElementById('templateModalTitle').textContent = '添加模板';
            document.getElementById('templateId').value = '';
            document.getElementById('templateName').value = '';
            document.getElementById('templateStatus').value = '1';
            
            // 清空字段列表
            document.getElementById('fieldList').innerHTML = '';
            
            // 添加一个默认字段
            addField();
            
            document.getElementById('templateModal').style.display = 'block';
        }
        
        // 显示编辑模板表单
        function showEditTemplateForm(id) {
            const template = templates.find(t => t.id === id);
            if (template) {
                editingTemplate = template;
                document.getElementById('templateModalTitle').textContent = '编辑模板';
                document.getElementById('templateId').value = template.id;
                document.getElementById('templateName').value = template.name;
                document.getElementById('templateStatus').value = template.status;
                
                // 清空字段列表
                document.getElementById('fieldList').innerHTML = '';
                
                // 添加现有字段
                if (template.fields && Array.isArray(template.fields)) {
                    template.fields.forEach(field => {
                        addField(field.name, field.type);
                    });
                } else {
                    // 添加一个默认字段
                    addField();
                }
                
                document.getElementById('templateModal').style.display = 'block';
            }
        }
        
        // 隐藏模板模态框
        function hideTemplateModal() {
            document.getElementById('templateModal').style.display = 'none';
        }
        
        // 添加字段
        function addField(name = '', type = 'text') {
            const fieldList = document.getElementById('fieldList');
            const fieldIndex = fieldList.children.length;
            
            const fieldItem = document.createElement('div');
            fieldItem.className = 'field-item';
            fieldItem.innerHTML = `
                <input type="text" placeholder="字段名称" value="${name}">
                <select>
                    <option value="text" ${type === 'text' ? 'selected' : ''}>文本</option>
                    <option value="image" ${type === 'image' ? 'selected' : ''}>图片</option>
                    <option value="file" ${type === 'file' ? 'selected' : ''}>文件</option>
                    <option value="link" ${type === 'link' ? 'selected' : ''}>链接</option>
                </select>
                <div class="field-actions">
                    ${fieldIndex > 0 ? '<button type="button" class="btn btn-danger" onclick="removeField(this)">删除</button>' : ''}
                </div>
            `;
            
            fieldList.appendChild(fieldItem);
        }
        
        // 删除字段
        function removeField(button) {
            button.closest('.field-item').remove();
        }
        
        // 删除模板
        async function deleteTemplate(id) {
            if (!confirm('确定要删除该模板吗？这将同时删除该模板下的所有记录。')) {
                return;
            }
            
            try {
                const response = await fetch(`/data/templates/${id}`, {
                    method: 'DELETE',
                    credentials: 'include'
                });
                
                if (response.ok) {
                    alert('删除成功');
                    showTemplateLoading(true);
                    await Promise.all([
                        loadTemplates(),
                        loadRecords()
                    ]);
                    showTemplateLoading(false);
                    renderTemplateList();
                    renderRecordList();
                    updateTemplateOptions();
                    updateRecordTemplateFilter();
                } else {
                    alert('删除失败');
                }
            } catch (error) {
                console.error('删除模板异常:', error);
                alert('删除模板时发生错误');
            }
        }
        
        // 显示创建记录表单
        function showCreateRecordForm(templateId = null) {
            editingRecord = null;
            document.getElementById('recordModalTitle').textContent = '添加记录';
            document.getElementById('recordId').value = '';
            
            // 设置模板选择
            const templateSelect = document.getElementById('recordTemplate');
            if (templateId) {
                templateSelect.value = templateId;
                loadTemplateFields();
            } else {
                templateSelect.value = '';
                document.getElementById('recordFields').innerHTML = '';
            }
            
            document.getElementById('recordModal').style.display = 'block';
        }
        
        // 显示编辑记录表单
        function showEditRecordForm(id) {
            const record = records.find(r => r.id === id);
            if (record) {
                editingRecord = record;
                document.getElementById('recordModalTitle').textContent = '编辑记录';
                document.getElementById('recordId').value = record.id;
                
                // 设置模板选择
                const templateSelect = document.getElementById('recordTemplate');
                templateSelect.value = record.templateId;
                loadTemplateFields(record.data);
                
                document.getElementById('recordModal').style.display = 'block';
            }
        }
        
        // 隐藏记录模态框
        function hideRecordModal() {
            document.getElementById('recordModal').style.display = 'none';
        }
        
        // 根据模板加载字段
        function loadTemplateFields(recordData = null) {
            const templateId = document.getElementById('recordTemplate').value;
            const fieldsContainer = document.getElementById('recordFields');
            fieldsContainer.innerHTML = '';
            
            if (!templateId) return;
            
            const template = templates.find(t => t.id == templateId);
            if (!template || !template.fields || !Array.isArray(template.fields)) return;
            
            template.fields.forEach((field, index) => {
                const fieldItem = document.createElement('div');
                fieldItem.className = 'form-item';
                
                let inputElement = '';
                switch (field.type) {
                    case 'image':
                        inputElement = `<input type="text" id="field_${index}" placeholder="图片URL">`;
                        break;
                    case 'file':
                        inputElement = `<input type="text" id="field_${index}" placeholder="文件URL">`;
                        break;
                    case 'link':
                        inputElement = `<input type="text" id="field_${index}" placeholder="链接地址">`;
                        break;
                    default: // text
                        inputElement = `<input type="text" id="field_${index}" placeholder="请输入${field.name}">`;
                }
                
                fieldItem.innerHTML = `
                    <label for="field_${index}">${field.name}</label>
                    ${inputElement}
                `;
                
                fieldsContainer.appendChild(fieldItem);
                
                // 如果有记录数据，填充表单
                if (recordData && recordData[field.name]) {
                    document.getElementById(`field_${index}`).value = recordData[field.name];
                }
            });
        }
        
        // 删除记录
        async function deleteRecord(id) {
            if (!confirm('确定要删除该记录吗？')) {
                return;
            }
            
            try {
                const response = await fetch(`/data/records/${id}`, {
                    method: 'DELETE',
                    credentials: 'include'
                });
                
                if (response.ok) {
                    alert('删除成功');
                    showRecordLoading(true);
                    await loadRecords();
                    showRecordLoading(false);
                    renderRecordList();
                } else {
                    alert('删除失败');
                }
            } catch (error) {
                console.error('删除记录异常:', error);
                alert('删除记录时发生错误');
            }
        }
        
        // 模板表单提交处理
        document.getElementById('templateForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const id = document.getElementById('templateId').value;
            const name = document.getElementById('templateName').value;
            const status = document.getElementById('templateStatus').value;
            
            if (!name) {
                alert('请输入模板名称');
                return;
            }
            
            // 收集字段数据
            const fields = [];
            const fieldItems = document.querySelectorAll('#fieldList .field-item');
            fieldItems.forEach(item => {
                const fieldName = item.querySelector('input').value;
                const fieldType = item.querySelector('select').value;
                if (fieldName) {
                    fields.push({ name: fieldName, type: fieldType });
                }
            });
            
            if (fields.length === 0) {
                alert('请至少添加一个字段');
                return;
            }
            
            const templateData = {
                name,
                fields,
                status: parseInt(status)
            };
            
            try {
                let response;
                if (editingTemplate) {
                    // 更新模板
                    response = await fetch(`/data/templates/${id}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(templateData),
                        credentials: 'include'
                    });
                } else {
                    // 创建模板
                    response = await fetch('/data/templates', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(templateData),
                        credentials: 'include'
                    });
                }
                
                if (response.ok) {
                    alert(editingTemplate ? '更新成功' : '创建成功');
                    hideTemplateModal();
                    showTemplateLoading(true);
                    await loadTemplates();
                    showTemplateLoading(false);
                    renderTemplateList();
                    updateTemplateOptions();
                    updateRecordTemplateFilter();
                } else {
                    alert(editingTemplate ? '更新失败' : '创建失败');
                }
            } catch (error) {
                console.error('保存模板异常:', error);
                alert('保存模板时发生错误');
            }
        });
        
        // 记录表单提交处理
        document.getElementById('recordForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const id = document.getElementById('recordId').value;
            const templateId = document.getElementById('recordTemplate').value;
            
            if (!templateId) {
                alert('请选择模板');
                return;
            }
            
            // 收集数据
            const data = {};
            const template = templates.find(t => t.id == templateId);
            if (template && template.fields && Array.isArray(template.fields)) {
                template.fields.forEach((field, index) => {
                    const fieldValue = document.getElementById(`field_${index}`)?.value || '';
                    data[field.name] = fieldValue;
                });
            }
            
            const recordData = {
                templateId: parseInt(templateId),
                data
            };
            
            try {
                let response;
                if (editingRecord) {
                    // 更新记录
                    response = await fetch(`/data/records/${id}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(recordData),
                        credentials: 'include'
                    });
                } else {
                    // 创建记录
                    response = await fetch('/data/records', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(recordData),
                        credentials: 'include'
                    });
                }
                
                if (response.ok) {
                    alert(editingRecord ? '更新成功' : '创建成功');
                    hideRecordModal();
                    showRecordLoading(true);
                    await loadRecords();
                    showRecordLoading(false);
                    renderRecordList();
                } else {
                    alert(editingRecord ? '更新失败' : '创建失败');
                }
            } catch (error) {
                console.error('保存记录异常:', error);
                alert('保存记录时发生错误');
            }
        });
    </script>
</body>
</html>